<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta  http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Vue中的插槽(slot)</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='root'>

			<!--具名插槽-->
			<!-- <child content="<p>world</p>"></child> -->
<!-- 			<body-content>
				<div class="header" slot='header'>header</div>
				<div class="footer" slot='footer'>footer</div>
			</body-content>
			 -->
			
			<!-- 作用域插槽 -->
			<child>
				<template slot-scope = 'props'>
					<h1>{{props.item}}</h1>
				</template>
			</child>
		</div>
	</body>
	<script type="text/javascript">
		
		Vue.component('child', {
						data: function(){
							return {
								list: [1,2,3,4]
							}
						},
						template: `
								<div>
									<ul>
										<slot v-for="item of list" :item = item></slot>
									</ul>
								</div>
							`
		})
		
		Vue.component('bodyContent', {
			props: ['content'],
			template: `<div>
							<slot name="header"><h1>default value</h1></slot>
							<div  class="content">content</div>
							<slot name="footer"></slot>
						</div>`
		})
		var vm = new Vue({
			el: "#root"
		})
		
		
		
	</script>
</html>